<template>
	<view>
		<view class="tab">
			<view class="tab-item" :class="tabIndex==0?'active':''"  @click="chgTab(0)">班级通知 <view :class="tabIndex==0?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==1?'active':''"  @click="chgTab(1)">学员签到 <view :class="tabIndex==1?'active':''"></view></view>
			<view class="tab-item" :class="tabIndex==2?'active':''"  @click="chgTab(2)">报名记录 <view :class="tabIndex==2?'active':''"></view></view>
		</view>
		
		<view v-if="tabIndex==0">
			<view class="list" style="background: white;">
				<scroll-view :refresher-triggered=refresherTriggered :refresherThreshold=refresherThreshold
								@refresherrefresh='refresherrefresh()' refresher-background="#FFFFFF" @scrolltolower='nextPage()' lower-threshold="500" class=""
								scroll-y :style="{height: Height+'px'}">
				<view v-for='itm in classMessage' class="item">
					<view>
						<image class="avatar" :src="itm.toUserImage"></image>
					</view>
					<view>
						<view class="header">
							<view><text  class="colorBlack" style="font-weight: bold;">{{itm.toUserName}}</text> <view class="colorGray">{{itm.createTime}}</view></view>
							<view class="colorOrange"  style="font-weight: bold;">
								{{itm.readTotal}}人已读
							</view>
						</view>
						<view class="content">
							<view class="title">{{itm.title}}</view>
							<view class="colorGray">{{itm.content}}</view>
						</view>
					</view>
				</view>
				</scroll-view>
			</view>
			
			
			<view class="btn" @click="goPublish()">
				发布通知
			</view>
			
			
			<view class="mask" @click="cancel()" v-if='isShow'></view>
			
			<view class="publish" :class="isShow?'animateShow':''">
				<view class="content">
					<view class="title">{{activityInfo.className}}全部学员将会收到通知</view>
					<view class="label">通知标题：</view>
					<view ><input placeholder="请输入标题内容" v-model="titlecontent" class="input" /></view>
					<view class="label">通知内容：</view>
					<view><textarea placeholder="请输入详细通知内容" v-model="detailcontent" class="textarea" /></textarea></view>
					<view class="btn1" @tap="send">确认发送</view>
				</view>
			</view>
			
		</view>
		
		<view class="" v-if='tabIndex==1' class="sign">
			<view v-for="itm in classSign" class="sign-item">
				<view class="base">
					<image :src="itm.image" class="avatar"></image>
					<view>{{itm.nickName}}</view>
				</view>
				<view v-if="itm.signTime !== '1' && itm.signTime !== '2'" style="color: #FF5533;">
				    已签到({{itm.signTime}})	
				</view>
				<view v-if="itm.signTime == '1'">
					未签到
				</view>
				<view v-if="itm.signTime == '2'">
					未开始
				</view>
			</view>
		</view>
		
		
		<view class="" v-if='tabIndex==2' class="sign">
			<view v-for="itm in studentlist" class="sign-item">
				<view class="base">
					<image :src="itm.image" class="avatar"></image>
					<view>{{itm.nickName}}
					  <view>{{itm.phone}}</view>
					</view>
				</view>
				<view >
				    {{itm.createTime}}
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				Height:400,
				tabIndex:0,
				isShow:'',
				students:[
					{name:'李先生', status:'0',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png'},
					{name:'刘先生', status:'0',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a3.png'},
					{name:'陶先生', status:'1',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a2.png',time:'13:30'}
				],
				applyList:[
					{name:'刘先生', phone:'188888888888', date:'2021-06-07 10:08',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a3.png'},
					{name:'李先生', phone:'188888888888', date:'2021-06-07 10:08',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png'},
					{name:'陶先生', phone:'188888888888', date:'2021-06-07 10:08',avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a2.png'}
				],
				notice:[
					{
						name:'陈松老师',
						avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a2.png',
						count:'36',
						time:'2021-05-01 12:36',
						title:'下周评弹课时间变动啦',
						desc:'因为我本人家里有事的原因，所以下周课程上课时间更改为下下周的周一上午，请大家相互告知，不要搞错啦。'
					},
					{
						name:'顾小伟老师',
						avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
						count:'36',
						time:'2021-05-01 12:36',
						title:'评弹班正式开课啦，上课尽量不要迟...',
						desc:'根据这学期的安排，明天咱们的评弹班就要正式开课啦，鉴于第一天上课可能出现很多问题，希望大家都能按时来上课。'
					},
					{
						name:'顾小伟老师',
						avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
						count:'36',
						time:'2021-05-01 12:36',
						title:'评弹班正式开课啦，上课尽量不要迟...',
						desc:'根据这学期的安排，明天咱们的评弹班就要正式开课啦，鉴于第一天上课可能出现很多问题，希望大家都能按时来上课。'
					},
					{
						name:'顾小伟老师',
						avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
						count:'36',
						time:'2021-05-01 12:36',
						title:'评弹班正式开课啦，上课尽量不要迟...',
						desc:'根据这学期的安排，明天咱们的评弹班就要正式开课啦，鉴于第一天上课可能出现很多问题，希望大家都能按时来上课。'
					},
					{
						name:'顾小伟老师',
						avatar:'https://xb-street.oss-cn-shanghai.aliyuncs.com/yl-school/static/tmp/a1.png',
						count:'36',
						time:'2021-05-01 12:36',
						title:'评弹班正式开课啦，上课尽量不要迟...',
						desc:'根据这学期的安排，明天咱们的评弹班就要正式开课啦，鉴于第一天上课可能出现很多问题，希望大家都能按时来上课。'
					}
				],
				shopId:'',
				id:'',
				classOrActivityId:'',
				studentlist:'',
				classMessage:'',
				classSign:'',
				pageNum:1,
				pageSize:10,
				activityInfo:'',
				isNull:false,
				titlecontent:'',
				detailcontent:'',
				hasNextPage:false
		    }
		},
		onLoad(option) {
			this.shopId = option.shopId
			this.id = option.id
			this.classOrActivityId = option.classOrActivityId
			console.log(option.shopId)
			console.log(option.classOrActivityId)
			// this.changeTab(0)
			this.getclassStudents()
			this.getActivityInfo()
			this.getClassMessage()
			this.getClassSign()
		},
		onReady() {
			let that = this;
			uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
				success(res) { //成功回调函数
					that.Height = res.windowHeight - uni.upx2px(230) //windoHeight为窗口高度，主要使用的是这个
				}
			})
		},
		methods: {
			getActivityInfo() {
				this.$api.getClassOrActivityInfo({
					id: this.id
				}).then((res) => {
					this.activityInfo = res.data.dataMap
					console.log(this.activityInfo)
					uni.setNavigationBarTitle({
						title: this.activityInfo.className
					})
					
				})
			},
			//班级通知列表
			getClassMessage() {
				this.pageNum = 1
				this.$api.getClassMessage({
					toClassId: this.id,
					toShopId:this.shopId
				},this.pageNum, this.pageSize).then((res) => {
					// this.classMessage = res.data.dataMap
					console.log(res.data.dataMap)
					var arr = res.data.dataMap.list
					// for (var i = 0; i < arr.length/2; i++) {
					// var temp = arr[i]; //交换变量
					// arr[i] = arr[arr.length - i - 1];
					// arr[arr.length-i-1]=temp;
					// }
					// console.log(arr)
					this.classMessage = arr
					this.hasNextPage = res.data.dataMap.hasNextPage
				})
			},
			getclassStudents() {
				this.$api.classStudents({
					classOrActivityId: this.classOrActivityId,
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.list)
						this.studentlist = res.data.dataMap.list
						for (var i = 0; i < this.studentlist.length; i++) {
							this.studentlist[i].createTime = this.renderTime(res.data.dataMap.list[i].createTime)
						}
						this.isNull = this.studentlist.length < 1 ? true : false
			
					}
				})
			},
			getClassSign() { //获取学员签到
				this.$api.getClassSign({
					classOrActivityId: this.classOrActivityId,
					shopId: this.shopId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap)
						this.classSign = res.data.dataMap
			
					}
				})
			},
			// 时间转化
			renderTime(date) {
				var dateee = new Date(date).toJSON();
				return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/,
					'')
			},
			chgTab(index){
				this.tabIndex = index;
			},
			goPublish(){
				//调出发布界面
				this.isShow = 'animateShow';
			},
			cancel(){
				this.isShow = '';
			},
			nextPage() {
				console.log("====出发底部===")
				console.log("====出发底部===" + this.pageNum)
				console.log("====出发底部===" + this.hasNextPage)
				if (this.hasNextPage) {
					this.pageNum = this.pageNum + 1
					console.log(this.pageNum)
					this.$api.getClassMessage({
						toClassId: this.id,
						toShopId:this.shopId
					},this.pageNum, this.pageSize).then((res) => {
						if (res.data.code == 200) {
							console.log(res.data)
							// this.MessageToList = res.data.dataMap
							var arr = res.data.dataMap.list
							// for (var i = 0; i < arr.length/2; i++) {
							// var temp = arr[i]; //交换变量
							// arr[i] = arr[arr.length - i - 1];
							// arr[arr.length-i-1]=temp;
							// }
							// console.log(arr)
							// this.MessageToList = arr
							for (var i = 0; i < arr.length; i++) {
								this.classMessage.push(arr[i])
							}
							this.hasNextPage = res.data.dataMap.hasNextPage
						}
					})
				}
				
			
			},
			//发送通知
			send(){
				if(this.titlecontent===''||this.detailcontent===''){
					uni.showToast({
						title: '请填写完整信息！',
						duration: 1500,
						icon: "none",
						
					});
					return
				}else{
					this.$api.sendMessage({
						toShopId: this.activityInfo.shopId,
						toClassifyId: this.activityInfo.classifyGoodsId,
						toClassId: this.activityInfo.id,
						title: this.titlecontent,
						content: this.detailcontent,
						role:2
					}).then((res) => {
						console.log(1111)
						if (res.data.code == 200) {		
							uni.showToast({
								title: '发送成功！',
								duration: 1500,
								icon: "none",
								
							});
							this.isShow = ''
							setTimeout(()=> {
							    this.getClassMessage()
						    }, 1000);
						}
						
					})
				}
			}
		}
		
	
	}
</script>

<style lang="scss">
	page{background-color: #F8F8F8;}
.tab{
  	 display: flex;
	 background-color: white;
  	 justify-content: space-around;
	 padding:15px 15px 0px 15px;
	 box-sizing: border-box;
	 border-bottom: 1px solid #eeeeee;
  	 .active{font-weight: bold;}
  	 .tab-item{
		 font-size: 28rpx;
  		 border-bottom: 5px solid white;
  		 .active{
  		   	background:linear-gradient(90deg, rgb(255,228,106), rgb(249,155,68));
  		   	border-radius: 20rpx;
  		   	margin:auto;
  		   	margin-top:5px;
  		   	height:5px;
  		   	width:60%;}
  		 }
  }
  .item{padding:10px;
     display:flex;
     .avatar{
		 margin-right: 10px;
		 height: 50px;width: 50px;border-radius: 50%;
	 }
	 .header{
		 display: flex;
		 justify-content: space-between;
		 width: 580rpx;
	 }
	 .content{
        background: #F5F5F5;
		border-radius: 10px;
		padding: 10px;
	 }
	 .title{font-weight: bold;margin:5px 0;color:#333333}
  }
  
  .sign{
	 
	  background-color: #F8F8F8;
	  .base{display: flex;align-items: center;}
	  .avatar{
	  		 margin-right: 10px;
	  		 height: 40px;width: 40px;border-radius: 50%;
	  }
	  .sign-item{
		  background-color: white;
		  padding:10px;
		  border-bottom: 1px solid #eeeeee;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
	  }
  }
  
  .btn{
     background-color: #FF5533;
     border-radius:50px;
     padding:10px;
     width:90%;
	 left:5%;
     box-sizing: border-box;
     font-size: 28rpx;
     margin:auto;
     color:white;text-align: center;
     position: fixed;
     bottom:50rpx;
  }
  
  .mask{
	  background-color: rgba(0,0,0,0.5);
	  top:0;
	  width: 100%;
	  height: 100%;
	  left:0;
	  z-index:1;
	  transition: .5s;
	  position: absolute;
  }
  .publish{
	  z-index:2;
	  position: absolute;
	  bottom:0;
	  display: none;
	  left:0;
	  width:100%;
	  .content{
		  background: white;
		  bottom:0;
		  position: absolute;
		  width:100%;
		  padding:20px 10px;
		  box-sizing: border-box;
		  border-radius: 10px 10px 0 0;
		  .title{
			  color:#999999;font-size:32rpx;
			  text-align: center;
		  }
		  .label{
			  color:#333333;font-weight: bold;
			  font-size:32rpx;
			  padding: 5px 0;
		  }
		  .textarea{
			  background: #F2F2F2;
			  border-radius: 5px;
		      width:100%;
			  padding:10px;
			  height: 100px;
			  box-sizing: border-box;
		  }
		 .input{
			  padding:10px;
              background: #F5F5F5;
			  border-radius: 5px;
		 } 
		 .btn1{
			 background-color: #FF5533;
			 border-radius:50px;
			 padding:10px;
			 width:100%;
			 box-sizing: border-box;
			 font-size: 28rpx;
			 color:white;text-align: center;
			 margin-top:10px;
		 }
	  }
  }
  .animateShow{
	  opacity: 1!important;
	  display: block;
	  .content{
		  bottom:0!important;
	  }
  }
</style>
